import { BasicColumn } from "/@/components/Table"
import { FormSchema } from "/@/components/Table"
import { h } from "vue"
import { Switch } from "ant-design-vue"
import { setRoleStatus } from "/@/api/demo/system"
import { useMessage } from "/@/hooks/web/useMessage"

export const columns: BasicColumn[] = [
  {
    title: "角色名称",
    dataIndex: "roleName",
    width: 200,
  },
  {
    title: "角色值",
    dataIndex: "roleValue",
    width: 180,
  },
  {
    title: "排序",
    dataIndex: "orderNo",
    width: 50,
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 120,
    customRender: ({ record }) => {
      if (!Reflect.has(record, "pendingStatus")) {
        record.pendingStatus = false
      }
      return h(Switch, {
        checked: record.status === "1",
        checkedChildren: "已启用",
        unCheckedChildren: "已禁用",
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true
          const newStatus = checked ? "1" : "0"
          const { createMessage } = useMessage()
          setRoleStatus(record.id, newStatus)
            .then(() => {
              record.status = newStatus
              createMessage.success(`已成功修改角色状态`)
            })
            .catch(() => {
              createMessage.error("修改角色状态失败")
            })
            .finally(() => {
              record.pendingStatus = false
            })
        },
      })
    },
  },
  {
    title: "创建时间",
    dataIndex: "createdAt",
    width: 180,
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
]

export const searchFormSchema: FormSchema[] = [
  {
    field: "roleNme",
    label: "角色名称",
    component: "Input",
    colProps: { span: 8 },
  },
  {
    field: "status",
    label: "状态",
    component: "Select",
    componentProps: {
      options: [
        { label: "启用", value: "0" },
        { label: "停用", value: "1" },
      ],
    },
    colProps: { span: 8 },
  },
]

export const formSchema: FormSchema[] = [
  {
    field: "roleName",
    label: "角色名称",
    required: true,
    component: "Input",
  },
  {
    field: "roleValue",
    label: "角色值",
    required: true,
    component: "Input",
  },
  {
    field: "status",
    label: "状态",
    component: "RadioButtonGroup",
    defaultValue: "0",
    componentProps: {
      options: [
        { label: "启用", value: "0" },
        { label: "停用", value: "1" },
      ],
    },
  },
  {
    label: "备注",
    field: "remark",
    component: "InputTextArea",
  },
  {
    label: " ",
    field: "menu",
    slot: "menu",
    component: "Input",
  },
]
